<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>标签管理</span>
                <span>
                    <el-button @click="add()" size="small" type="primary" plain>
                        <el-icon>
                            <EditPen />
                        </el-icon>添加标签
                    </el-button>
                </span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" />
            <el-table-column prop="name" label="标签名称" />
            <el-table-column prop="operation" label="操作" width="180">
                <template #default="scope">
                    <el-button @click="handleOpenDialog(scope.row,scope.$index)" size="small" type="primary" plain>
                        <el-icon>
                            <EditPen />
                        </el-icon>编辑
                    </el-button>
                    <el-button @click="remove(scope.row.id,scope.$index)" size="small" type="danger" plain>
                        <el-icon>
                            <Delete />
                        </el-icon>删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 编辑dialog -->
    <el-dialog v-model="dialogVisible" title="编辑标签" width="30%">
        <el-form ref="formRef" :rules="rules" :model="form">
            <el-form-item label="标签名称" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleEdit(formRef)">保存</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加dialog -->
    <el-dialog v-model="adddialog" title="编辑标签" width="30%">
        <el-form ref="formRef" :rules="rules" :model="form">
            <el-form-item label="标签名称" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="adddialog = false">取消</el-button>
                <el-button type="primary" @click="handleAdd(formRef)">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, ref } from 'vue';
import list from '@/api/aritcle';
import tag from '@/api/tag';

//加载列表
const tableData = ref([]);
async function loadList() {
    let { status, msg, data } = await list.tag();
    if (status) {
        // console.log(data);
        tableData.value = data;
    } else {
        ElMessage(msg);
    }
}
loadList();
const adddialog = ref(false)
const dialogVisible = ref(false);
//获取输入内容
let form = ref({ name: '' });
//缓存当前行
let current = ref(0);
//打开编辑弹窗
let handleOpenDialog = (data, i) => {
    dialogVisible.value = true;
    //浅拷贝，还原表单
    form.value = { ...data };
    current.value = i;
}
//获取form组件实例
let formRef = ref();
//表单验证规则
const rules = reactive({
    name: [
        // 为空执行上行，输入执行下行
        { required: true, message: '请输入标签名称', trigger: 'blur' },
        { min: 3, max: 20, message: '标签长度3到20', trigger: 'blur' },
    ],
});
//编辑标签
function handleEdit(formEl) {
    //校验整个表单
    formEl.validate(async (valid) => {
        if (valid) {
            // console.log({ ...form });
            let { status, msg } = await tag.edit(form.value.id, { ...form.value });
            if (status) {
                //操作dom
                tableData.value[current.value] = { ...form.value }
                //关闭dialog
                dialogVisible.value = false;
                //消息提示
                //修改成功
                ElMessage.success(msg);
            }
        }
    })
}
//添加标签
async function handleAdd(name) {
    // console.log(form.value);
    let { status, msg } = await tag.create({ ...form.value });
    if (status) {
        //操作dom
        loadList();
        // tableData.value.push({ ...form.value });
        //关闭dialog
        adddialog.value = false;
        //消息提示
        //修改成功
        ElMessage.success(msg);
    }
}

//添加标签
let add = () => {
    adddialog.value = true;
    //浅拷贝，还原表单
    form.value = { };
}
//移除标签
let remove = (id, i) => {
    ElMessageBox.confirm(
        `是否删除用户?`,
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: '警告',
        }
    )
        .then(async () => {
            ElMessage({ type: 'success', message: '修改成功' });
            let { status, msg } = await tag.remove(id);
            tableData.value.splice(i, 1);
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消关闭',
            })
        })
}

</script>
<style >
.box-card {
    width: 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}
</style>
  